<template>
    <div class="sjplatformAdd">
        <el-form label-width="100px">
            <el-form-item label="项目名称：">
                <span>{{ projectStore.teamModel.projectName }}</span>
            </el-form-item>
            <el-form-item label="说明：">
                <span>{{ projectStore.teamModel.mark }}</span>
            </el-form-item>
            <el-form-item label="进出时间：">
                <el-date-picker v-model="projectStore.teamModel.startTime" disabled clearable type="date"
                    placeholder="进入日期" />&nbsp;&nbsp;~&nbsp;&nbsp;<el-date-picker
                    v-model="projectStore.teamModel.endTime" clearable type="date" disabled placeholder="退出日期" />
            </el-form-item>
        </el-form>
        <div class="title-div">
            <el-row>
                <el-col :span="2" class="el-col-left">
                    资源日历</el-col>
                <el-col :span="22" class="el-col-right">
                    <el-button-group>
                        <el-tooltip content="日历模式" placement="bottom" effect="light">
                            <i class="calendar-icon" @click="isCalendar = true; isGantt = false; isTable = false;"></i>
                        </el-tooltip>
                        <el-tooltip content="甘特图模式" placement="bottom" effect="light">
                            <i class="list-icon" @click="isGantt = true; isTable = false; isCalendar = false"></i>
                        </el-tooltip>
                        <el-tooltip content="表格模式" placement="bottom" effect="light">
                            <i class="table-icon" @click="isTable = true; isGantt = false; isCalendar = false"></i>
                        </el-tooltip>
                    </el-button-group>
                </el-col>
            </el-row>
        </div>
        <el-calendar v-if="isCalendar" ref="calendar">
            <template #header="{ date }">
                <span>{{ date }}</span>
                <el-button-group>
                    <el-tooltip content="上一年" placement="bottom" effect="light">
                        <i class="leftc2-icon" @click="selectDate('prev-year')"></i>
                    </el-tooltip>
                    <el-tooltip content="上一月" placement="bottom" effect="light">
                        <i class="leftc1-icon" @click="selectDate('prev-month')"></i>
                    </el-tooltip>
                    <el-tooltip content="回到今天" placement="bottom" effect="light">
                        <i class="today-icon" @click="selectDate('today')"></i>
                    </el-tooltip>
                    <el-tooltip content="下一月" placement="bottom" effect="light">
                        <i class="rightc1-icon" @click="selectDate('next-month')"></i>
                    </el-tooltip>
                    <el-tooltip content="下一年" placement="bottom" effect="light">
                        <i class="rightc2-icon" @click="selectDate('next-year')"></i>
                    </el-tooltip>
                </el-button-group>
            </template>
            <template #date-cell="{ data }">
                <div class="calendar-day-box"
                    :class="{ 'is-select-day': data.isSelected, 'is-weekend': [0, 6].includes(new Date(data.date).getDay()) }">
                    <div>{{ `${new Date(data.day).getDate()}` }}</div>
                    <div v-if="getMemberByDay(new Date(data.date))" class="calendar-cell-div">
                        <span>{{ getMemberByDay(new Date(data.date)) }}</span>
                    </div>
                </div>
            </template>
        </el-calendar>
        <div v-if="isGantt">
            <GanttCharts :chartWidth="chartWidth" :chartCategories="chartCategories" :chartData="chartData" />
        </div>
        <div v-if="isTable" class="sjplatformtable">
            <el-table :data="projectStore.teamModel.members" v-loading="loading" empty-text="暂无数据" stripe border>
                <el-table-column label="序号" width="60">
                    <template #default="{ $index }">
                        {{ $index + 1 + (currentPage - 1) * pageSize }}
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="参与人" width="100" />
                <el-table-column prop="entryTime" label="进入时间" width="140">
                    <template #default="{ row }">
                        <span>{{ commonUtil.Methods.formatDate(row.entryTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="exitTime" label="退出时间" width="140">
                    <template #default="{ row }">
                        <span>{{ commonUtil.Methods.formatDate(row.exitTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="mark" label="备注" class-name="left-align" />
            </el-table>
            <el-pagination layout="prev, pager, next" :total="teamData.total" :page-size="pageSize"
                :current-page="currentPage" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineExpose } from "vue";
import commonUtil from "../../../utils/common";
import { useProjectTeam } from "../../../hooks/ProjectManager/Plan/useProjectTeam";
import GanttCharts from "../../Common/Echarts/GanttCharts.vue";

let receivedProps = defineProps(['teamId']);
let chartCategories = [];
let chartData = [];
let { teamData, projectStore, getTeamMembersByMId, updateTeamMainStatus } = useProjectTeam(1, 10);
getTeamMembersByMId(receivedProps.teamId).then(() => {
    for (let item of projectStore.teamModel.members) {
        if (!chartCategories.find(name => name == item.userName)) {
            chartCategories.push(item.userName)
        }

        chartData.push(
            {
                name: item.userName,
                value: [chartCategories.indexOf(item.userName), Date.parse(item.entryTime), Date.parse(item.exitTime), 1],
                itemStyle: { color: '#72b362' }
            }
        )
    }
});

function getMemberByDay(day: Date) {
    let names = [];
    if (projectStore.teamModel.members) {
        for (let item of projectStore.teamModel.members) {
            if (new Date(item.entryTime) <= day && new Date(item.exitTime) >= day) {
                names.push(item.userName);
            }
        }
    }
    return names.join('，');
}

/*-----------------日历模式-----------------*/
let chartWidth = window.innerWidth * 0.7;
let isCalendar = ref(true);//是否是日历格式
const calendar = ref()
const selectDate = (val: string) => {
    calendar.value.selectDate(val)
}

/*-----------------甘特图模式-----------------*/
let isGantt = ref(false);//是否是甘特图模式


/*-----------------表格模式-----------------*/
let isTable = ref(false);//是否是表格模式
let currentPage = ref(1);
let pageSize = ref(10); // 默认每页大小
let loading = ref(false);
//翻页事件
function handleCurrentChange(newPage) {
    currentPage.value = newPage;
    //   searchData(); // 根据当前页获取数据
}

//更新审批状态
async function updateApproveStatus(value) {
    await updateTeamMainStatus(receivedProps.teamId, value);
}

defineExpose({ updateApproveStatus });
</script>